<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML文本与图片标签示例</title>
  <style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    .image-container {
        margin: 20px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .text-example {
        margin-bottom: 30px;
    }
  </style>
</head>
<body>
<h1>HTML文本与图片标签示例</h1>

<div class="text-example">
  <h2>1. 文本标签示例</h2>

  <p>这是一个段落标签 &lt;p&gt;，用于展示一段文本内容。</p>

  <h3>标题标签 (h1-h6)</h3>
  <h1>h1 - 最大的标题</h1>
  <h2>h2 - 二级标题</h2>
  <h3>h3 - 三级标题</h3>

  <h3>文本格式化标签</h3>
  <p>这是<strong>粗体文本</strong> (使用 &lt;strong&gt;)</p>
  <p>这是<em>斜体文本</em> (使用 &lt;em&gt;)</p>
  <p>这是<u>下划线文本</u> (使用 &lt;u&gt;)</p>
  <p>这是<s>删除线文本</s> (使用 &lt;s&gt;)</p>
  <p>这是<sup>上标文本</sup> (使用 &lt;sup&gt;)，如 x<sup>2</sup></p>
  <p>这是<sub>下标文本</sub> (使用 &lt;sub&gt;)，如 H<sub>2</sub>O</p>

  <h3>引用标签</h3>
  <blockquote>
    这是长引用文本 (使用 &lt;blockquote&gt;)，通常会有缩进效果，用于引用较长的内容。
  </blockquote>
  <p>爱因斯坦说过：<q>想象力比知识更重要</q> (使用 &lt;q&gt; 表示短引用)</p>

  <h3>列表标签</h3>
  <p>无序列表 (&lt;ul&gt;)：</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ul>

  <p>有序列表 (&lt;ol&gt;)：</p>
  <ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
  </ol>
</div>

<div class="image-example">
  <h2>2. 图片标签示例</h2>

  <div class="image-container">
    <h3>基本图片标签</h3>
    <img src="https://picsum.photos/600/400?random=1" alt="自然风光照片" width="600" height="400">
    <p>上面的图片使用了基本的 &lt;img&gt; 标签，包含src和alt属性</p>
  </div>

  <div class="image-container">
    <h3>带标题的图片</h3>
    <figure>
      <img src="https://picsum.photos/600/400?random=2" alt="城市建筑照片" width="600" height="400">
      <figcaption>图1：城市建筑风光（使用 &lt;figure&gt; 和 &lt;figcaption&gt; 标签）</figcaption>
    </figure>
  </div>

  <div class="image-container">
    <h3>响应式图片</h3>
    <img src="https://picsum.photos/800/500?random=3" alt="山水风景照片" style="max-width:100%;height:auto;">
    <p>这张图片设置了max-width:100%，会根据容器大小自动调整</p>
  </div>

  <div class="image-container">
    <h3>图片链接</h3>
    <a href="https://example.com" target="_blank">
      <img src="https://picsum.photos/300/200?random=4" alt="可点击的图片" width="300" height="200">
    </a>
    <p>图片被包裹在 &lt;a&gt; 标签中，点击图片会跳转到链接地址</p>
  </div>
</div>
</body>
</html>
